<template>
  <div>
    <!-- 月份报告 -->
    <header>
      <el-table
        :data="tableData"
        style="width: 100%"
        :default-sort="{ prop: 'date', order: 'descending' }"
      >
        <el-table-column prop="date" label="收入" sortable width="105">
        </el-table-column>
        <el-table-column prop="value_a" label="收入" sortable width="105">
        </el-table-column>
        <el-table-column prop="vlaue_b" label="支出" sortable width="105">
        </el-table-column>
      </el-table>
    </header>
    <!-- 季度报告 -->
    <article>
        <QuarterlyReport />
    </article>
  </div>
</template>

<script>
import QuarterlyReport from '../Finance/QuarterlyReport.vue'
export default {
    components:{
        QuarterlyReport
    },
  data() {
    return {
      tableData: [
        {
          date: "一月",
          value_a: "113",
          vlaue_b: "3242",
        },
        {
          date: "二月",
          value_a: "113",
          vlaue_b: "3242",
        },
        {
          date: "三月",
          value_a: "113",
          vlaue_b: "3242",
        },
        {
          date: "四月",
          value_a: "113",
          vlaue_b: "3242",
        },
        {
          date: "五月",
          value_a: "113",
          vlaue_b: "3242",
        },
        {
          date: "六月",
          value_a: "113",
          vlaue_b: "3242",
        },
        {
          date: "七月",
          value_a: "113",
          vlaue_b: "3242",
        },
        {
          date: "八月",
          value_a: "113",
          vlaue_b: "3242",
        },
        {
          date: "九月",
          value_a: "113",
          vlaue_b: "3242",
        },
        {
          date: "十月",
          value_a: "113",
          vlaue_b: "3242",
        },
        {
          date: "十一月",
          value_a: "113",
          vlaue_b: "3242",
        },
        {
          date: "十二月",
          value_a: "113",
          vlaue_b: "3242",
        },
      ],
    };
  },
  methods: {
    formatter(row, column) {
      return row.address;
    },
  },
};
</script>

<style lang="less" scoped>
div {
  width: 100%;
  height: 100%;
  header {
    width: 100%;
    height: 55%;
    background-color: red;
  }
  article {
    width: 100%;
    height: 45;
    background-color: aqua;
  }
}
.el-table{
    height:100%;
    overflow: hidden;
    overflow-y: auto;
}
.el-table::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}
</style>